<template>
  <div class="role">
    <role-search />
    <role-content @new-click="handleNewClick" @edit-click="handleEditclick" />
    <role-modal ref="modalRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import roleSearch from './c-cpns/role-search.vue'
import roleContent from './c-cpns/role-content.vue'
import roleModal from './c-cpns/role-modal.vue'

// 对modal组件操作
const modalRef = ref<InstanceType<typeof roleModal>>()
// 点击新增
function handleNewClick() {
  modalRef.value?.setModalVisible()
}
// 点击编辑
function handleEditclick(itemData) {
  modalRef.value?.setModalVisible(false, itemData)
}
</script>

<style lang="less" scoped>
.role {
  color: red;
}
</style>
